<template>
  <div class="bg">
    <button @click="isShow=!isShow">显示/隐藏</button>
    <transition appear>  <!--      appear意味着刷新完毕后会执行一遍进入动画-->
      <h1 v-show="isShow">你好啊！</h1>
    </transition>
    <transition name="hello">
      <h1 v-show="isShow">你好啊！</h1>
    </transition>
  </div>
</template>

<script>
    export default {
      name: "Animation",
      data(){
        return{
          isShow:true
        }
      },
    }
</script>

<style lang="less" scoped>
h1{
  background-color: orange;
}
h1:last-child{
  background-color: skyblue;
}
//transition无名时候的进入动画
.v-enter-active{
  animation: trans 2s linear;
}
//transition无名时候的离开动画
.v-leave-active{
  animation: trans 2s linear reverse;  //reverse 倒着播放动画
}
@keyframes trans {
  from{
    transform: translateX(-100%)
  }to{
     transform: translateX(0);
   }
}

//hello的进入动画
.hello-enter-active{
  animation: trans 5s linear;
}
//hello的离开动画
.hello-leave-active{
  animation: trans 5s linear reverse;  //reverse 倒着播放动画
}
</style>
